Add a callback to be called after updating Paper.js
Paper.js redrawing seems to be done asynchronously.
Is that in itself a good thing? in itself is a good thing?
Set the Zoom value for Paper
Erase Image
Show Paper
If the process is called
Image disappears
Paper before zooming is displayed.
A zoomed Paper is then displayed.
It looks terrible.
I wonder if Paper has a handler that is called after the end of the redraw or something, I want to delay turning off the Image.
The setZoom is causing the Matrix to change.
That calls for _changed
This is deleting and redrawing the entire screen.
I assume this is probably called asynchronously, but I'm not sure where it's being called.
So, as for my request for a callback on completion of drawing, I'd like to see a callback on completion of drawing.
We would like there to be a callback call here, but there is none at present.
→ Apply the monkey patch.
code:ts
window.app.paper.project.view.__proto__.update = function() {
if (!this._needsUpdate)
return false;
var project = this._project,
ctx = this._context,
size = this._viewSize;
ctx.clearRect(0, 0, size.width + 1, size.height + 1);
if (project)
project.draw(ctx, this._matrix, this._pixelRatio);
this._needsUpdate = false;
if(window.app.callbackAfterCanvasViewUpdate){
window.app.callbackAfterCanvasViewUpdate();
}
return true;
}
after having done ...
code:ts
window.app.callbackAfterCanvasViewUpdate = () => {
image.style.display = "none";
let canvas = document.getElementById("myCanvas") as HTMLElement;
canvas.style.display = "inline";
window.app.callbackAfterCanvasViewUpdate = null;
}
It's like.
---
This page is auto-translated from /nishio/Paper.jsの更新後に呼ばれるコールバックをつける. If you looks something interesting but the auto-translated English is not good enough to understand it, feel free to let me know at @nishio_en. I'm very happy to spread my thought to non-Japanese readers.